<script lang="ts" name="CognitiveFunctionAssess" setup>
import {ref, watch} from 'vue'
import {HeaderData} from '@/components/dTable/dTable'
import dDialog from '@/components/dDialog/dDialog.vue'
import dTable from '@/components/dTable/dTable.vue'
import dIcon from '@/components/dIcon.vue'
import {ElMessage} from 'element-plus'
import {useRoute} from 'vue-router'
const route = useRoute()
// 禁止编辑
const disEdit = ref<boolean>(Boolean(route.query.disEdit))

const props = defineProps({
  //显示
  showDialog: {
    type: Boolean,
    required: true
  },
  // 老年人认知功能得分明细
  odCognScore: {
    type: String,
    required: true
  }
})

const emits = defineEmits(['close', 'confirm'])

// 题目单选
interface Question {
  title: string // 问题
  value: string // 值
}

// 题目列表
interface CognitiveFunctionAssessTable {
  scoringItem: string //项目标题
  scoringItemText: string // 项目文案
  questionRadios: Array<Question> // 题目单选框组
}

// 总分
const totalScore = ref<number>(0)
// 得分明细
const scoreDetails = ref<Array<string>>([])

// 从上到下存放得分明细数组
const odCognScoreArr = ref<Array<string>>(props.odCognScore?.split('|'))

// 项目1
const item1 = [
  {title: '问：今天是？哪一年？', value: odCognScoreArr.value[0] || ''},
  {title: '问：今天是？季节？', value: odCognScoreArr.value[1] || ''},
  {title: '问：今天是？月份？', value: odCognScoreArr.value[2] || ''},
  {title: '问：今天是？日期？', value: odCognScoreArr.value[3] || ''},
  {title: '问：今天是？星期几？', value: odCognScoreArr.value[4] || ''}
]

// 项目2
const item2 = [
  {title: '问：我们现在在哪里？国家？', value: odCognScoreArr.value[5] || ''},
  {title: '问：我们现在在哪里？城市？', value: odCognScoreArr.value[6] || ''},
  {title: '问：我们现在在哪里？城市的哪一部分？', value: odCognScoreArr.value[7] || ''},
  {title: '问：我们现在在哪里？建筑物？', value: odCognScoreArr.value[8] || ''},
  {title: '问：我们现在在哪里？楼层？', value: odCognScoreArr.value[9] || ''}
]

// 项目3
const item3 = [
  {title: '球（停一秒钟）', value: odCognScoreArr.value[10] || ''},
  {title: '旗子（停一秒钟）', value: odCognScoreArr.value[11] || ''},
  {title: '树（停一秒钟）', value: odCognScoreArr.value[12] || ''}
]

// 项目4
const item4 = [
  {title: '100减7等于？', value: odCognScoreArr.value[13] || ''},
  {title: '93减7等于？', value: odCognScoreArr.value[14] || ''},
  {title: '86减7等于？', value: odCognScoreArr.value[15] || ''},
  {title: '79减7等于？', value: odCognScoreArr.value[16] || ''},
  {title: '72减7等于？', value: odCognScoreArr.value[17] || ''}
]

// 项目5
const item5 = [
  {title: '球', value: odCognScoreArr.value[18] || ''},
  {title: '旗子', value: odCognScoreArr.value[19] || ''},
  {title: '树', value: odCognScoreArr.value[20] || ''}
]

// 项目6
const item6 = [
  {title: '问：这是什么？（展示铅笔）', value: odCognScoreArr.value[21] || ''},
  {title: '问：这是什么？（展示手表）', value: odCognScoreArr.value[22] || ''}
]

// 项目7
const item7 = [{title: '说：我现在让你重复我说的话。准备好了吗？“瑞雪兆丰年”', value: odCognScoreArr.value[23] || ''}]

// 项目8
const item8 = [
  {title: '说：仔细听并按照我说的做。左手拿着这张纸', value: odCognScoreArr.value[24] || ''},
  {title: '说：仔细听并按照我说的做。把它对折', value: odCognScoreArr.value[25] || ''},
  {title: '说：仔细听并按照我说的做。把它放在您的右腿上', value: odCognScoreArr.value[26] || ''}
]

// 项目9
const item9 = [{title: '说：读下面的句子，并按照做。“闭上你的眼睛”', value: odCognScoreArr.value[27] || ''}]

// 项目10
const item10 = [{title: '说：写一个句子。', value: odCognScoreArr.value[28] || ''}]

// 项目11
const item11 = [{title: '照右图画', value: odCognScoreArr.value[29] || '', iconConfig: {icon: 'common-pentagon', type: 'custom', color: '#333333', size: 100}}]

// 评估表头
const cognitiveFunctionAssessHeader = ref<Array<HeaderData>>([
  {prop: 'scoringItem', label: '项目', columnType: 'slot', align: 'center', width: '246'},
  {prop: 'question', label: '题目', columnType: 'slot', align: 'center', 'min-width': '200'}
])

// 评估列表
const cognitiveFunctionAssessTable = ref<Array<CognitiveFunctionAssessTable>>([
  {scoringItem: '1.时间定向力', scoringItemText: '*注 日期和星期差一天可算正确', questionRadios: item1},
  {scoringItem: '2.地点定向力', scoringItemText: '', questionRadios: item2},
  {scoringItem: '3.即刻回忆', scoringItemText: '说：仔细听。我要说三个词，请在我说完以后重复。准备好了吗', questionRadios: item3},
  {scoringItem: '4.注意力与计算力', scoringItemText: '问：从100减去7，顺序减下去，直至我让你停止。 *注 不能用笔算', questionRadios: item4},
  {scoringItem: '5.回忆那三个词', scoringItemText: '问：我刚才让你记住的三个词是什么', questionRadios: item5},
  {scoringItem: '6.命名', scoringItemText: '', questionRadios: item6},
  {scoringItem: '7.语言重复', scoringItemText: '*注 只许说一遍，只有正确、咬字清楚', questionRadios: item7},
  {scoringItem: '8.理解力', scoringItemText: '*注 操作要求次序正确', questionRadios: item8},
  {scoringItem: '9.阅读', scoringItemText: '', questionRadios: item9},
  {scoringItem: '10.写', scoringItemText: '*注 句子必须有主语、谓语，且有意义', questionRadios: item10},
  {scoringItem: '11.画画', scoringItemText: '*注 只有绘出两个五边形的图案，交叉处形成1个小四边形，才算对', questionRadios: item11}
])

/**
 * @description: 关闭弹窗
 * @return {*}
 */
const onCancel = () => {
  emits('close')
}
/**
 * @description: 关闭弹窗
 * @return {*}
 */
const onClose = () => {
  emits('close')
}

/**
 * @description: 保存
 * @return {*}
 */
const onConfirm = () => {
  // 得分明细
  scoreDetails.value.length = 0
  // 循环列表项目
  for (let i = 0; i < cognitiveFunctionAssessTable.value.length; i++) {
    const radioList = cognitiveFunctionAssessTable.value[i].questionRadios
    // 循环项目里面的题目
    for (let j = 0; j < radioList.length; j++) {
      const radio = radioList[j]
      // 有一项为空值就退出循环
      if (!radio.value) {
        ElMessage.warning('请检查项目是否全部评估完成!')
        return
      } else {
        scoreDetails.value.push(radio.value)
      }
    }
  }
  // 得分明细
  emits('confirm', {scoreDetails: scoreDetails.value.join('|'), totalScore: totalScore.value})
  emits('close')
}

watch(
  () => cognitiveFunctionAssessTable.value,
  () => {
    totalScore.value = 0
    // 计算总分
    cognitiveFunctionAssessTable.value.forEach((item) => {
      item.questionRadios.forEach((el) => {
        if (el.value === '1') {
          totalScore.value++
        }
      })
    })
  },
  {deep: true, immediate: true}
)
</script>
<template>
  <d-dialog
    title="老年人认知功能评估"
    :show-dialog="showDialog"
    :hide-save-btn="disEdit"
    :width="900"
    @cancel="onCancel"
    @close="onClose"
    @confirm="onConfirm"
  >
    <d-table :table-data="cognitiveFunctionAssessTable" :table-header-data="cognitiveFunctionAssessHeader" :highlight-current-row="false" class="cognitive-function-assess-table">
      <template #scoringItem="{row}">
        <div class="d-common-text-align-left">
          <b style="margin-right: 6px">{{ row.scoringItem }}</b>{{ row.scoringItemText }}
        </div>
      </template>
      <template #question="{row}">
        <div v-for="item in row.questionRadios" :key="item" class="question">
          <div class="d-common-flex-algin-center">
            <span>{{ item.title }}</span>
            <d-icon v-if="item.iconConfig" :icon-config="item.iconConfig" class="question-icon" />
          </div>
          <div>
            <el-radio-group v-model="item.value" :disabled="disEdit">
              <el-radio label="1">
                正确
              </el-radio>
              <el-radio label="2">
                错误
              </el-radio>
            </el-radio-group>
          </div>
        </div>
      </template>
    </d-table>
    <div class="total-score">
      总分：{{ totalScore }}
    </div>
  </d-dialog>
</template>
<style scoped lang="less">
.cognitive-function-assess-table {
  height: 635px;
}
.total-score {
  margin-top: 11px;
  text-align: right;
  font-weight: bold;
}

.question {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.question-icon {
  margin-left: 30px;
}
</style>
